<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ZLTool-设备管理</title>
    <link rel="icon" href="/static/icon.png">
    <link rel="stylesheet" href="/static/base.css"/>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.7/theme-chalk/index.min.css"/>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
    <!-- 引入组件库 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.7/index.min.js"></script>

    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.1/qs.min.js"></script>
    <script src="//at.alicdn.com/t/font_2918200_h3canf2rlcm.js"></script>

    <style>
        .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }

        .square-main {
            display: flex;
            min-height: 600px;
        }

        .square-left {
            width: 220px;
            border-right: solid 1px #DCDFE6;
        }

        .square-left li {
            list-style: none;
            cursor: pointer;
            margin-top: 4px;
        }

        .square-right {
            flex: 1;
        }

        .indicatorn {
            text-align: right;
        }

        .indicatorn .el-radio-button__inner {
            padding: 8px 12px;
            font-size: 18px;
        }

        .square-screen {
            height: calc(100% - 20px);
            display: grid;
        }

        .square-screen-1 {
            grid-template-rows: 100%;
            grid-template-columns: 100%
        }

        .square-screen-2 {
            grid-template-columns: 50% 50%;
            grid-template-rows: 100%;
        }

        .square-screen-4 {
            grid-template-columns: 50% 50%;
            grid-template-rows: 50% 50%;
        }

        .video-box {
            min-height: 100px;
            min-width: 130px;
            background: #303133;
            border: solid 1px #409EFF;
        }

        .video-box:focus {
            border: solid 4px #409EFF;
            border-radius: 2px;
            box-shadow: 0px 0px 6px rgba(64, 158, 255, .9), 0 0 6px rgba(64, 158, 255, .7);
            /*transition-property: border-color, box-shadow;*/
            /*transition-duration: 0.3s;*/
            outline: none;
        }


    </style>
</head>
<body>
<div id="app">
    <layout>
        <template #menu>
            <top-menu index="square.html"></top-menu>
        </template>
        <template #main>
            <el-main class="square-main">
                <div class="square-left">
                    <li v-for="item in deviceList" @click="playVideo(item)">{{item.name}}</li>
                </div>
                <div class="square-right">
                    <div class="indicatorn">
                        <el-radio-group v-model="screenModel" size="small">
                            <el-radio-button :label="1" title="1分屏">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-fenping_1fenping"></use>
                                </svg>
                            </el-radio-button>
                            <el-radio-button :label="2" title="2分屏">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-fenping1"></use>
                                </svg>
                            </el-radio-button>
                            <el-radio-button :label="4" title="4分屏">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-fenping_4fenping"></use>
                                </svg>
                            </el-radio-button>
                        </el-radio-group>
                    </div>

                    <div class="square-screen" :class="'square-screen-' + screenModel">
                        <div v-for="screen in screenModel" class="video-box" tabindex="0"></div>
                    </div>
                </div>
            </el-main>
        </template>
     </layout>

</div>
</body>
<script src="/static/layout.js"></script>
<script src="/static/menu.js"></script>
<script src="/static/request.js"></script>
<script src="/static/jessibuca/index.js"></script>
<script src="/static/jessibuca/player.js"></script>

<script>

    var t = new Vue({
        el: '#app',
        data: function () {
            return {
                searchForm: {
                    name: ''
                },
                screenModel: 2,
                deviceLoading: false,
                deviceList: [],
            }
        },
        created: function () {
            this.$nextTick(() => {
                this.loadList()
            });
        },
        methods: {
            loadList() {
                this.deviceLoading = true
                var params = new URLSearchParams()
                // params.append('currentPage', this.current)
                // params.append("name", this.searchForm.name)
                //
                // this.searchForm.tags.forEach(t=>{
                //     params.append("tags", t)
                // })
                //
                // // searchForm
                request.post('/device/getList', params).then(res => {
                    this.deviceLoading = false
                    if (res.data) {
                        let data = res.data;
                        if (data.code === 0) {
                            this.deviceList = data.data
                        } else {
                            this.$message.error(data.msg);
                        }
                    }
                }).catch(onError);
            },

            player(r) {
            },

            //播放视频
            playVideo(r) {

            },
        }
    })

</script>
</html>